<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Adminity - Tables</title>
  <link rel="shortcut icon" href="favicon.gif">
  <!---CSS Files-->
  <link rel="stylesheet" href="../static/css/master.css">
  <link rel="stylesheet" href ="../static/css/tables.css">
  <link rel="stylesheet" href ="../static/bootstrap-3/css/bootstrap.min.css">
  <!---jQuery Files-->
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <!--  <script src="../static/js/jquery-1.7.1.min.js"></script>-->
  <script src="../static/js/jquery-ui-1.8.17.min.js"></script>
  <script src="../static/js/styler.js"></script>
  <script src="../static/js/jquery.tipTip.js"></script>
  <script src="../static/js/colorpicker.js"></script>
  <script src="../static/js/sticky.full.js"></script>
  <script src="../static/js/global.js"></script>
  <script src="../static/js/jquery.dataTables.min.js"></script>
  <script src="../static/bootstrap-3/js/bootstrap.min.js"></script>
  <!---Fonts-->
  <link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700' rel='stylesheet' type='text/css'>
  <!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
  <!--[if lte IE 8]>
  <script language="javascript" type="text/javascript" src="../static/js/flot/excanvas.min.js"></script>
  <![endif]-->
  <style>
    #fenye {
      text-align: center;
    }
    /* 弹窗样式 */
    .modal {
      display: none; /* 默认隐藏 */
      position: fixed; /* 固定位置 */
      z-index: 1; /* 在顶层 */
      padding-top: 100px; /* 离顶部的距离 */
      left: 0;
      top: 0;
      width: 100%; /* 宽度全屏 */
      height: 100%; /* 高度全屏 */
      overflow: auto; /* 启用滚动 */
      background-color: rgb(0,0,0); /* 黑色背景 */
      background-color: rgba(0,0,0,0.4); /* 黑色背景，半透明 */
    }

    /* 表单样式 */
    .modal-content {
      background-color: #fefefe;
      margin: auto;
      padding: 20px;
      border: 1px solid #888;
      width: 80%; /* 宽度80% */
    }

    /* 关闭按钮样式 */
    .close-button {
      position: absolute;
      top: 15px;
      right: 35px;
      cursor: pointer;
    }
  </style>
</head>

<body>

<!--- HEADER -->

<div class="header">
  <a href="dashboard.html"><img src="../static/img/logo.png" alt="Logo" /></a>
  <div class="styler">
    <ul class="styler-show">
      <li><div id="colorSelector-top-bar"></div></li>
      <li><div id="colorSelector-box-head"></div></li>
    </ul>
  </div>
</div>

<div class="top-bar">
  <ul id="nav">
    <li id="user-panel">
      <img src="../static/img/nav/usr-avatar.jpg" id="usr-avatar" alt="" />
      <div id="usr-info">
        <p id="usr-name">欢迎 回来, {{.user.Username}}</p>
        <p><a href="#" onclick="document.getElementById('myMessage').style.display='block'">用户基本信息</a><a href="/quitLogin">退出登录</a><</p>
      </div>
    </li>
    <li>
      <ul id="top-nav">
        <li class="nav-item">
          <a href="typography.html"><img src="../static/img/nav/typ.png" alt="" /><p>数据分析预览</p></a>
        </li>
        <li class="nav-item">
          <a href=""><img src="../static/img/nav/grid.png" alt="" /><p>用户账号管理</p></a>
        </li>
        <li class="nav-item">
          <a href="#"><img src="../static/img/nav/flm.png" alt="" /><p>客户开发计划</p></a>
        </li>
      </ul>
    </li>
  </ul>
</div>

<!-- 添加数据弹窗 -->
<div id="myModal" class="modal">
  <div class="modal-content">
    <h2>客户开发计划添加</h2>
    <form id="dataForm">
      <label for="name">营销机会名称:</label><br>
      <input type="text" id="name" name="name"><br>
      <label for="static">营销机会状态:</label><br>
      <input type="text" id="static" name="email"><br>
      <label for="chance">机会概率:</label><br>
      <input type="text" id="chance" name="email"><br>
      <label for="describe">营销机会概述:</label><br>
      <input type="text" id="describe" name="email"><br>
      <label for="customerName">用户名称:</label><br>
      <input type="text" id="customerName" name="email"><br>
      <input type="button" value="提交" id="btn">
    </form>
    <button class="close-button" onclick="document.getElementById('myModal').style.display='none'">关闭</button>
  </div>
</div>
<!-- 显示个人信息 -->
<div id="myMessage" class="modal">
  <div class="modal-content">
    <h2>用户信息</h2>
    <form id="dataForm23">
      <label for="name">用户名称: {{.user.Username}}</label><br>
    </form>
    <button class="close-button" onclick="document.getElementById('myMessage').style.display='none'">关闭</button>
  </div>
</div>
<!-- 修改数据弹窗 -->
<div id="myModal2" class="modal">
  <div class="modal-content">
    <h2>营销计划修改</h2>
    <form id="dataForm2">
      <!--      隐藏的元素,用于保存id值-->
      <input type="text" id="updateId" style="display: none;" />
      <label for="updateName">营销机会名称:</label><br>
      <input type="text" id="updateName" name="name"><br>
      <label for="updateStatic">营销机会状态:</label><br>
      <input type="text" id="updateStatic" name="email"><br>
      <label for="updateChance">机会概率:</label><br>
      <input type="text" id="updateChance" name="email"><br>
      <label for="updateDescribe">营销机会概述:</label><br>
      <input type="text" id="updateDescribe" name="email"><br>
      <label for="updateCustomerName">用户名称:</label><br>
      <input type="text" id="updateCustomerName" name="email"><br>
      <label for="allocationUser">分配人:</label><br>
      <input type="text" id="allocationUser" name="email"><br>
      <input type="button" value="提交" id="updateBtn">
    </form>
    <button class="close-button" onclick="document.getElementById('myModal2').style.display='none'">关闭</button>
  </div>
</div>
<!--- CONTENT AREA -->

<div class="content container_12">

  <div class="box grid_12">
    <div class="box-head"><h2>客户开发计划</h2></div>
    <div class="box-content no-pad">
      <ul class="table-toolbar">
        <li><a href="#" onclick="document.getElementById('myModal').style.display='block'"><img src="../static/img/icons/basic/plus.png" alt="" /> 添加</a></li>
        <li><a href="#" id="submitButton"><img src="../static/img/icons/basic/delete.png" alt="" /> 删除</a></li>
        <!--       <li><a href="#" onclick="document.getElementById('myModal2').style.display='block'"><img src="../static/img/icons/basic/save.png" alt="" /> 编辑</a></li>-->
        <li><a href="#" id="updateSelect"><img src="../static/img/icons/basic/save.png" alt="" /> 编辑</a></li>
        <li><input type="text" id="keyWord1" placeholder="请输入创建人名称"></li>
        <li><input type="text" id="keyWord2" placeholder="请输入客户名称"></li>
        <li><a id="keyWordSelect"><img src="../static/img/icons/basic/up.png" alt=""/>搜索</a></li>
        <!--        <li><a href="#"><img src="../static/img/icons/basic/down.png" alt="" /> 下移</a></li>-->
      </ul>

      <table class="display" id="dt2">
        <thead>
        <tr>
          <th>选择</th>
          <th>开发计划id</th>
          <th>计划名称</th>
          <th>计划状态</th>
          <th>计划概述</th>
          <th>创建人姓名</th>
          <th>添加时间</th>
          <th>修改时间</th>
          <th>客户名称</th>
          <th>客户地址</th>
          <th>客户描述</th>
          <th>公司法人</th>
          <th>客户编号</th>
          <th>客户级别</th>
          <th>联系人姓名</th>
          <th>联系人电话</th>
        </tr>
        </thead>
        <tbody id="marketingOpportunities">
        {{range $key,$val := .cdp}}
        <tr class="odd gradeX">
          <td><input type="radio" id="option1" name="option" value="{{$val.PlanID}}"></td>
          <td>{{$val.PlanID}}</td>
          <td>{{$val.PlanName}}</td>
          <td>{{$val.PlanStatus}}</td>
          <td>{{$val.CusDevelopValDes}}</td>
          <td>{{$val.CreateUser}}</td>
          <td>{{$val.AddTime}}</td>
          <td>{{$val.UpdateTime}}</td>
          <td>{{$val.Customers.CustomerName}}</td>
          <td>{{$val.Customers.CustomersAddress}}</td>
          <td>{{$val.Customers.CustomerDescribe}}</td>
          <td>{{$val.Customers.LegalPerson}}</td>
          <td>{{$val.Customers.CustomersNum}}</td>
          <td>{{$val.Customers.CustomerRank}}</td>
          <td>{{$val.Customers.Contacts.ContactName}}</td>
          <td>{{$val.Customers.Contacts.ContactInfo}}</td>
        </tr>
        {{end}}
        </tbody>
      </table>
      <div>
        <nav aria-label="Page navigation example" id="fenye" >
          <ul class="pagination">
            {{ $TotalCount := .page.TotalCount }}
            {{ $currentPage := .page.CurrentPage }}
            {{ $TotalPages := .page.TotalPages }}
            {{ if gt $TotalCount 0 }}
            <li class="page-item"><a class="page-link" href="/listCustomerDevelopmentPlans?pageNo=1">首页</a></li>
            <li class="page-item">
              <a class="page-link" href="/listCustomerDevelopmentPlans?pageNo={{minusOne $currentPage}}" aria-label="Previous">
                <span aria-hidden="true">&laquo;</span>
                <span class="sr-only">Previous</span>
              </a>
            </li>
            {{range $i, $e := until $TotalPages}}
            <li class="page-item"><a class="page-link" href="/listCustomerDevelopmentPlans?pageNo={{$e}}">{{$e}}</a></li>
            {{end}}
            <li class="page-item">
              <a class="page-link" href="/listCustomerDevelopmentPlans?pageNo={{add $currentPage}}" aria-label="Next">
                <span aria-hidden="true">&raquo;</span>
                <span class="sr-only">Next</span>
              </a>
            </li>
            <li class="page-item"><a class="page-link" href="/listCustomerDevelopmentPlans?pageNo={{$TotalPages}}">尾页</a></li>
            {{ end }}
          </ul>
        </nav>

      </div>
    </div>
  </div>
</div>
<div class="footer">
  <p>Powered by Adminity Administration Interface</p>
</div>

<script> /* SCRIPTS */
$(function () {
  $('#dt1').dataTable( {
    "bJQueryUI": true
  });
  $('#dt2').dataTable( {
    "bJQueryUI": true
  });
  $('#dt3').dataTable( {
    "bJQueryUI": true,
    "sPaginationType": "full_numbers"
  }); /*   For the data tables */
});
</script>


</body>
<script>
  <!--  添加数据-->
  $('#btn').click(function(){
    var name = $('#name').val();
    var static = $('#static').val();
    var chancestr = $('#chance').val();
    var describe = $('#describe').val();
    var customerName = $('#customerName').val();
    var chance = parseInt(chancestr)
    // 获取input下name=sex的选项
    //var sex = $('input[name=sex]:checked').val();
    //var age=parseInt(a)
    $.ajax({
      url: '/insertMarketingOpportunities', // 后端控制器路由地址
      type: 'POST',
      dataType: 'json',
      contentType: 'application/json',
      //data: JSON.stringify({ uname: username, upwd: password,usex:sex,uage:age}),
      data: JSON.stringify({
        opportunity_name:name,
        opportunity_status:static,
        chance:chance,
        marketing_describe:describe,
        customers:{
          customer_name:customerName
        }
      }),
      success: function(response) {
        // if (response.code===200) {
        if (response.code===200) {
          // $('#result').html('<p>登录成功！</p>');
          var elementById = document.getElementById("successAlert");
          elementById.textContent = response.message;
          elementById.style.display = "block";
          setTimeout(function(){
            document.getElementById("successAlert").style.display = "none";
            window.location.href="/listMarketingOpportunities"
          }, 3000);
        } else {
          // $('#result').html('<p>登录失败：' + response.message + '</p>');
          var elementById2 = document.getElementById("alert");
          elementById2.textContent = response.message;
          elementById2.style.display = "block";
          setTimeout(function(){
            elementById2.style.display = "none";
            window.location.href="/listMarketingOpportunities"
          }, 3000);
        }
      },
      error: function(xhr, status, error) {
        console.log('Error occurred: ' + error);
      }
    });
  })
</script>
<script>
  <!--  删除数据-->
  // 获取单选框的值
  document.getElementById('submitButton').addEventListener('click', function() {
    var selectedOption = document.querySelector('input[name="option"]:checked');
    var id = parseInt(selectedOption.value)
    $.ajax({
      url: '/deleteMarketingOpportunities', // 后端控制器路由地址
      type: 'DELETE',
      dataType: 'json',
      contentType: 'application/json',
      //data: JSON.stringify({ uname: username, upwd: password,usex:sex,uage:age}),
      data: JSON.stringify({
        opportunity_id:id
      }),
      success: function(response) {
         if (response.code===200) {
          // $('#result').html('<p>登录成功！</p>');
           var elementById = document.getElementById("successAlert");
           elementById.textContent = response.message;
           elementById.style.display = "block";
           setTimeout(function(){
             document.getElementById("successAlert").style.display = "none";
             window.location.href="/listMarketingOpportunities"
           }, 3000);
        } else {
          // $('#result').html('<p>登录失败：' + response.message + '</p>');
           var elementById2 = document.getElementById("alert");
           elementById2.textContent = response.message;
           elementById2.style.display = "block";
           setTimeout(function(){
             elementById2.style.display = "none";
             window.location.href="/listMarketingOpportunities"
           }, 3000);
        }
      },
      error: function(xhr, status, error) {
        console.log('Error occurred: ' + error);
      }
    });
  });
</script>
<!--展示单条要修改数据-->
<script>
  document.getElementById('updateSelect').addEventListener('click', function() {
    var selectedOption = document.querySelector('input[name="option"]:checked');
    var id = parseInt(selectedOption.value)
    $.ajax({
      url: '/updateSelect', // 后端控制器路由地址
      type: 'POST',
      dataType: 'json',
      contentType: 'application/json',
      //data: JSON.stringify({ uname: username, upwd: password,usex:sex,uage:age}),
      data: JSON.stringify({
        opportunity_id:id
      }),
      success: function(data) {
        //后端拿到数据之后进行添加
        $('#updateId').val(data.OpportunityID);
        $('#updateName').val(data.OpportunityName);
        $('#updateStatic').val(data.OpportunityStatus);
        $('#updateChance').val(data.Chance);
        $('#updateDescribe').val(data.MarketingDescribe);
        $('#updateCustomerName').val(data.CustomersName);
        $('#allocationUser').val(data.AllocationUser);
        //赋值之后让弹唱其显示出来
        document.getElementById('myModal2').style.display='block'
      },
      error: function(xhr, status, error) {
        console.log('Error occurred: ' + error);
      }
    });
  });
</script>
<script>
  // <!--  修改数据-->
  document.getElementById('updateBtn').addEventListener('click', function() {
    //用于获取对应的值
    var selectedOption = document.querySelector('input[name="option"]:checked');
    var id = parseInt(selectedOption.value)
    var updateName = $('#updateName').val();
    var updateStatic = $('#updateStatic').val();
    var updateChanceStr = $('#updateChance').val();
    var updateDescribe = $('#updateDescribe').val();
    var updateCustomerName = $('#updateCustomerName').val();
    var updateChance = parseInt(updateChanceStr)
    var allocationUser = $('#allocationUser').val();
    // 获取input下name=sex的选项
    //var sex = $('input[name=sex]:checked').val();
    //var age=parseInt(a)
    $.ajax({
      url: '/updateMarketingOpportunities', // 后端控制器路由地址
      type: 'PUT',
      dataType: 'json',
      contentType: 'application/json',
      //data: JSON.stringify({ uname: username, upwd: password,usex:sex,uage:age}),
      data: JSON.stringify({
        opportunity_id:id,
        opportunity_name:updateName,
        opportunity_status:updateStatic,
        chance:updateChance,
        marketing_describe:updateDescribe,
        customers:{
          customer_name:updateCustomerName
        },
        allocation_user:allocationUser
      }),
      success: function(response) {
        if (response.code===200) {
          // $('#result').html('<p>登录成功！</p>');
          var elementById = document.getElementById("successAlert");
          elementById.textContent = response.message;
          elementById.style.display = "block";
          setTimeout(function(){
            document.getElementById("successAlert").style.display = "none";
            window.location.href="/listMarketingOpportunities"
          }, 3000);
        } else {
          // $('#result').html('<p>登录失败：' + response.message + '</p>');
          var elementById2 = document.getElementById("alert");
          elementById2.textContent = response.message;
          elementById2.style.display = "block";
          setTimeout(function(){
            elementById2.style.display = "none";
            window.location.href="/listMarketingOpportunities"
          }, 3000);
        }
      },
      error: function(xhr, status, error) {
        console.log('Error occurred: ' + error);
      }
    });
  });
</script>
<script>
  <!--  关键字搜索-->
  $('#keyWordSelect').click(function(){
    var userName = $('#keyWord1').val();
    var customerName = $('#keyWord2').val();
    // 获取input下name=sex的选项
    //var sex = $('input[name=sex]:checked').val();
    //var age=parseInt(a)
    $.ajax({
      url: '/selectMarketingOpportunities', // 后端控制器路由地址
      type: 'POST',
      //dataType: 'json',
      contentType: 'application/json',
      //data: JSON.stringify({ uname: username, upwd: password,usex:sex,uage:age}),
      data: JSON.stringify({
        create_user:userName,
        customers:{
          customer_name:customerName
        }
      }),
      success: function(data) {
        // 创建一个临时的 div 元素，将返回的 HTML 数据插入其中
        var tempDiv = $("<div>").html(data);

        // 从临时 div 中选择特定的元素
        var opportunitiesHtml = tempDiv.find("#marketingOpportunities").html();

        // 将提取到的 HTML 数据插入到页面中的另一个元素中
        $("#marketingOpportunities").html(opportunitiesHtml);
        //关闭分页,因为这里有ui来进行显示
        document.getElementById('fenye').style.display='none'
      }
      // success: function(response) {
      //   // 处理返回的JSON数据
      //   //alert("返回的数据："+response.message)
      //   console.log(response)
      //   console.log(response.success)
      //   // if (response.code===200) {

      // },
      // error: function(xhr, status, error) {
      //   console.log('Error occurred: ' + error);
      // }
    });
  })
</script>
</html>